<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- vue中可以监听 DOM 事件 ，绑定表达式 -->
			<button v-on:click="counter += 1">{{counter}}</button>
			<!-- 绑定函数 -->
			<button v-on:click="greet1">alert1</button>
			<!-- 绑定带参数的函数 -->
			<button v-on:click="greet2('abc')">alert2</button>
			<!-- 绑定带特殊参数的函数，$event是触发事件的对象 -->
			<button v-on:click="greet3(name,$event)">alert3</button>
			
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					counter : 0,
					name : 'vue'
				},
				
				methods:{
					greet1:function(){
						alert(this.counter);
					},
					greet2:function(str){
						alert(str);
					},
					greet3:function(str,e){
						alert(str);
						console.log(e);
					}
				}
			})
			
		</script>
	</body>
</html>
